<template>
  <el-drawer
    :title="title"
    :visible="show"
    :size="width"
    :append-to-body="true"
    @close="close"
  >
    <slot></slot>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
    </span>
  </el-drawer>
</template>

<script type="text/javascript">
export default {
  props: ['show', 'width', 'title'],
  data() {
    return {

    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        console.log('显示弹窗')
      }
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    submit() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

.dialog-footer {
  width: 100%;
  height: auto;
  position: absolute;
  right: 0px;
  bottom: 0px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: flex-end;
  background: #fff;
  .btn {
    width: 84px;
    height: 32px;
  }
}
</style>
